<template>
    <div>
        <h1>显示会员信息</h1>
        <a href="/AddMember">新增</a>

        名称:<input type="text" v-model="ts.name">
        年龄:
        <input type="text" v-model="ts.age">-<input type="text" v-model="ts.agex">
        登记编号:
        <select v-model="ts.levelid">
            <option value="0">请选择</option>
            <option v-for="a in data" :value="a.memberLevelId">{{ a.memberLevelName }}</option>
        </select>
        <input type="button" value="查询" @click="cx">
        <input type="button" value="重置" @click="cz">
        <a href="https://localhost:7258/api/Member/DaoChu">导出</a>
        <table class="table">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>会员名称</td>
                    <td>图片</td>
                    <td>年龄</td>
                    <td>会员等级编号</td>
                    <td>状态</td>
                    <td>是否删除</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in date">
                    <td>{{ a.memberId }}</td>
                    <td>{{ a.memberName }}</td>
                    <td>
                        <img :src="'https://localhost:7258/'+a.img" width="60px" height="60px">
                    </td>
                    <td>{{ a.age }}</td>
                    <td>{{ a.memberLevelName }}</td>
                    <td>{{ a.state?"启用":"禁用" }}</td>
                    <td>{{ a.mSdelete }}</td>
                    <td>
                        <input type="button" :value="a.state?'禁用':'启用'" @click="xzhuan(a.memberId)">
                        <input type="button" value="修改" @click="xiu(a.memberId)">
                        <input type="button" value="删除" @click="de(a.memberId)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="fanye(1)"> 
        <input type="button" value="上一页" @click="fanye(2)">
        <input type="button" v-for="c in zys.row" :value="c" @click="gezu(c)"> 
        <input type="button" value="下一页" @click="fanye(3)"> 
        <input type="button" value="尾页" @click="fanye(4)"> 
        当前第{{ ts.index }}页 共{{ zys.list }}条 每页{{ ts.size }}条 共{{ zys.row }}页
        <select v-model="ts.size" @click="yyl">
            <option>2</option>
            <option>4</option>
            <option>6</option>
        </select>
        <input type="number" v-model="ts.index">
        <input type="button" value="跳转" @click="tiao">
        <a href="/AddRight">权益</a>
     </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref,onMounted } from 'vue';
import axios from 'axios';
const routher = useRouter()
onMounted(()=>{
    getdate(),
    show()
})
const xiu=(val:any)=>{
    routher.push({path:"/UpdMember",query:{id:val}})
}
const de=(val:any)=>{
    if(!confirm("确认删除吗")){
        return
    }
    axios.delete("https://localhost:7258/api/Member/Dmember",{params:{id:val}}).then(res=>{
        if(res.data>0){
            alert("删除成功")
            show()
        }
        else{
            alert("删除失败")
        }
    })
}
const xzhuan=(val:any)=>{
    if(!confirm("确认修改吗")){
        return
    }
    axios.get("https://localhost:7258/api/Member/Zmember",{params:{id:val}}).then(res=>{
        if(res.data>0){
            alert("修改成功")
            show()
        }
        else{
            alert("修改失败")
        }
    })
}

const yyl=()=>{
    show()
}
const tiao=()=>{
    show()
}
const gezu=(val:any)=>{
    ts.value.index=val;
    show()
}
const getdate=()=>{
    axios.get("https://localhost:7258/api/MemerLevel/GetMemberLevels",{params:data.value}).then(res=>{
        data.value=res.data;
    })
}
const data=ref([{
    "memberLevelId": 0,
    "memberLevelName": "",
    "lstate": false,
    "rightLevelId": 0
}])
const cx=()=>{
    ts.value.index=1
    show()
}
const cz=()=>{
    ts.value={
        index:1,
    size:2,
    name:'',
    age:0,
    agex:0,
    levelid:0
    }
    show()
}
const fanye=(val:any)=>{
    if(val==1){
        ts.value.index=1
        show()
    }
    if(val==2){
        if(ts.value.index>1){
            ts.value.index-=1
            show()
        }
    }
    if(val==3){
        if(ts.value.index<zys.value.row){
            ts.value.index+=1
            show()
        }
    }
    if(val==4){
        ts.value.index=zys.value.row
        show()
    }
}
const ts=ref({
    index:1,
    size:2,
    name:'',
    age:0,
    agex:0,
    levelid:0
})
const zys=ref({
    list:0,
    row:0
})
const show=()=>{
    axios.get("https://localhost:7258/api/Member/ShowMember",{params:ts.value}).then(res=>{
        date.value=res.data.row

        zys.value.list=res.data.list
        zys.value.row=Math.ceil(res.data.list/ts.value.size)
    })
}
const date=ref([{
    "memberName": "",
    "memberId": 0,
    "memberLevelId": 0,
    "state": false,
    "img": "",
    "age": 0,
    "mSdelete": false,
    "memberLevelName": ""
}])
</script>

<style scoped>

</style>